<template>
	<div id="permissionManage">
		<!--新增的点击按钮-->
		<el-button type="success" style="margin-bottom:10px"
        @click="showAddNew=true,parentid=0,parentDesc=''"
        >
            	新增权限
        </el-button>
		<el-collapse accordion>
			<!--遍历第一层数据-->
            <el-collapse-item  v-for="(item,key,index) in allPermissions" 
            :key="key"
            :name="index"
            :title="item.permissionDesc"
            style="text-align:left;"
            >
            	<template slot="title">
            		<!--父级上资料-->
            		<div class="permissionTitle">
            			{{item.permissionDesc}}
            			<!--删除按钮-->
            			<el-button type='danger' size='mini' 
            				@click.stop = 'deletePermission(item._id)'
            			>
            				删除
            			</el-button>
            		</div>
            	</template>
            	
            	
               <ul>
               		<li style="margin-left: 10px;margin-bottom: 10px;">
               			
               			<!--新增权限的按钮-->
               			<el-button type='primary' size='mini'
               				@click='showAddNew=true,parentid=item._id,parentDesc=item.permissionDesc'
               			>
               			新增权限
               			</el-button>
               		</li>
               		
               		<!--给子级上资料-->
                   <li v-for="(permission,permissionKey) in item.children" 
                   :key="permissionKey"
                   style="padding-left:10px"
                   >
                       {{permission.permissionDesc}}
                   </li>
               </ul>
            </el-collapse-item>
        </el-collapse>
        <!--子组件的渲染-->
        <add-new-perssmin 
        	:showAddNew='showAddNew'
        	:parentid='parentid'
        	:parentDesc='parentDesc'
        	/>
        	
	</div>
</template>

<script>
	//导入子组件,新增权限的功能
	import AddNewPerssmin from './AddNewPermission'
	export default{
		components:{AddNewPerssmin},
		//挂载完成获取数据
		mounted(){
			//dispatch是异步的操作,commit是同步的操作
			this.$store.dispatch('loadAllPermission')
		},
		//数据
		data(){
			return {
				activeName:'2',
				showAddNew:false,
				parentid:0,
				parentDesc:''
			}
		},
		//获取到vuex里面相对应的数据
		computed:{
			allPermissions(){
				
				return this.$store.getters.allPermissions;
			}
		},
		methods:{
			//删除按钮的设置
			deletePermission(id){
				var action = ()=>{
					this.$http.post(this.$apis.deletePermissionById,{_id:id})
					.then((resp)=>{
						this.$message({
							message:resp.data.message,
							type:resp.data.success?"success":"danger"
						});
						if(resp.data.success){
							this.$store.dispatch('loadAllPermission')
						}
						
					})
				}
				this.operatorConfirm(action,"删除权限");
			}
		},
	}
</script>

<style lang="scss" scoped>
    #permissionManage{
        width: 100%;
        height: 100%;
        text-align: left;
        
    }
     #permissionManage /deep/.el-collapse-item__header{
        padding-left: 10px;
    }
    .permissionTitle{
        display: flex;
        justify-content: space-between;
    }
</style>